<template>
  <h1>隐藏显示指令</h1>
  <!--
    -if指令:
    指令值的类型为布尔型 true/false

    若不添加该指令 字段默认显示
    若添加该指令值为`true` 则字段正常显示
    若添加该指令值为`false` 则该元素不会被渲染到DOM中 也不会进行编译
  -->
  <p v-if="true">隐藏显示指令字段1</p>
  <p v-if="false">隐藏显示指令字段2</p>
  <p>隐藏显示指令字段3</p>

  <hr>

  <p v-if="isShow">🌙</p>
  <p v-if="isShow">⭐</p>
  <!--
    v-else是v-if的取反表达
    若距离此指令最近的其他被v-if命令标记的元素为true 显示
    则被v-else指令修饰的内容不会显示
    若为v-if的值为false 则被v-else修饰的元素显示
  -->
  <p v-else>☀</p>

  <hr>
  <!--
    v-if和v-show的区别:
    v-if:直接在DOM中跳过该元素的渲染 HTML代码中没有该元素 避免不必要的渲染 保证性能
    v-show:修改元素的CSS属性display:none 推荐在频繁切换元素是否显示的情境中使用
           原因: v-show不会频繁创建和删除元素 而v-if直接将元素跳过编译 不适合频繁切换显示条件
  -->
  <p v-show="false">🚆</p>
  <p v-if="false">🚀</p>

</template>

<script setup>
import {ref} from "vue";

const isShow = ref(true);
</script>

<style scoped>

</style>